<script setup lang="ts">
import type { FormRules } from 'element-plus'
import { reactive } from 'vue'

// 绑定到表单的数据
const formData = reactive({
    username: '',
    password: '',
})

// FormRules<泛型>  提供代码提示
// typeof xxx      获取数据的类型
const formDataRules: FormRules<typeof formData> = {
    username: [
        // 非空校验 required / 错误提示 message / 触发时机 trigger
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        // 正则校验 pattern
        { pattern: /^[a-zA-Z0-9_]{4,16}$/, message: '用户名格式不正确', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9_]{8,16}$/, message: '用户名格式不正确', trigger: 'blur' },
    ],
}
</script>

<template>
    <div>
        <!-- model 绑定总数据 / rules 绑定总规则  -->
        <el-form :model="formData" :rules="formDataRules">
            <!-- prop 绑定校验字段 -->
            <el-form-item label="用户名" prop="username">
                <!-- v-model 双向绑定数据 -->
                <el-input placeholder="请输入用户名" v-model="formData.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input placeholder="请输入用户名" v-model="formData.password"></el-input>
            </el-form-item>
        </el-form>

        {{ formData }}
    </div>
</template>